<template>
  <view class="uni-popup-share">
    <view class="uni-share-title">
      <div></div>
      <div class="title">
        <text>{{ title }}</text>
        <div class="line"></div>
      </div>
      <uni-icons
        type="closeempty"
        size="30"
        class="close"
        @click="close"
      ></uni-icons>
    </view>
    <view class="sub-title"><text  v-if="asdbad!='11'" >物料名称</text></view>
    <view class="search">
      <u-icon name="search" color="#909399" :size="28"></u-icon>
      <input  v-if="asdbad!='11'" 
        v-model="searchValue"
        height="30"
        placeholder="请输入物料编码或名称"
        style="width: 100%;"
      />
	  <input  v-if="asdbad=='11'" 
	    v-model="searchValue"
	    height="30"
	    placeholder="请输入物料种类"
	    style="width: 100%;"
	  />
    </view>
    <view class="please-select">请选择</view>
    <scroll-view scroll-y="true" class="scroll">
      <view
	    v-if="asdbad!='11'"
        class="item"
        :class="selectIndex === index ? 'active' : ''"
        v-for="(item, index) in filterData"
        :key="item.catCode"
        @click="select(index,item)"
      >
        <view class="">
          {{ item.catName }}
        </view>
        <view style="color: #f0ad4e"> 物料编码：{{ item.catCode}} </view>
      </view>
	  <view
	    v-if="asdbad=='11'" 
	    class="item"
	    :class="selectIndex === index ? 'active' : ''"
	    v-for="(item, index) in filterData"
	    :key="item.catCode"
	    @click="select(index,item)"
	  >
	    <view class="" style="text-align: center;">
	      {{ item.label }}
	    </view>
	  
	  </view>
    </scroll-view>
    <button class="confirm" @click="confirm">确定</button>
  </view>
</template>

<script>
import popup from "./popup.js";
export default {
  mixins: [popup],
  emits: ["select"],
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
    },
	asdbad: {
	   type: String,
	},
  },
  data() {
    return {
      selectIndex: -1,
      catCodeer:"",
	  catCodeererty:"",
      searchValue: "",
    };
  },
  methods: {
    close() {
       console.log("关闭遮罩");
      this.popup.close();
    },
    select(index,item) {
     console.log(this.filterData[index].catCode)
     this.catCodeer=this.filterData[index].catCode;
      this.selectIndex =index;
	  this.catCodeererty=item;
    },
    confirm() {
      this.$emit("select", this.selectIndex, this.catCodeer,this.catCodeererty);
    },
  },
  computed: {
    // filterData() {
    //    console.log("搜索输入",this.searchValue);
    //   console.log(this.data);
    //   return this.data.filter((item) => {
    //     if (!this.searchValue.trim()) {
    //       return true;
    //     }
    //     return (
    //       item.catName.indexOf(this.searchValue) >= 0 ||
    //       item.catCode.indexOf(this.searchValue) >= 0|| item.label.indexOf(this.searchValue)>= 0
    //     );
    //   });
    // },
	filterData() {
	   console.log("搜索输入",this.searchValue);
	  console.log(this.data);
	  return this.data.filter((item) => {
	    if (!this.searchValue.trim()) {
	      return true;
	    }
		if(this.asdbad!='11'){
			return (
			  item.catName.indexOf(this.searchValue) >= 0 ||
			  item.catCode.indexOf(this.searchValue) >= 0
			);
		}else{
			return item.label.indexOf(this.searchValue) >= 0
		}
	   
	  });
	},
	
  },
};
</script>
<style scoped>
.uni-popup-share {
  background-color: #fff;
  margin: 0 4vw;
}

.uni-share-title {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  align-items: center;
  justify-content: center;
  height: 40px;
  color: red;
  font-size: 14px;
}

.title {
  display: flex;
  flex-direction: column;
  place-items: center;
}

.line {
  width: 100px;
  height: 1px;
  background-color: red;
}

.sub-title {
  margin-top: 5px;
  font-weight: 600px;
  font-size: 16px;
  text-align: center;
}

.search {
		width: 100%;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
		background-color: white;
		border:solid 1px gray
}
.search input {
  font-size: 14px;
  line-height: 1.8;
  margin-left: 10px;
}

.query {
  color: #fff;
  background-color: red;
  border-radius: 4px;
  font-size: 14px;
  line-height: 18px;
  padding: 5px 10px;
  margin: 0 0 0 20px;
}

.please-select {
  text-align: center;
}

.confirm {
  width: 50vw;
  color: #fff;
  background-color: red;
  border-radius: 10px;
  font-size: 16px;
  margin: 20px 21vw;
}

.scroll {
  height: 40vh;
  border-bottom: 1px solid #f2f2f2;
  border-top: 1px solid #f2f2f2;
}

.close {
  justify-self: flex-end;
}

.item {
  padding: 5px;
  /* margin: 5px 0; */
  /* padding-left: 5px; */
  /* background-color: #f2f2f2 */
  border-bottom: 1px solid #f2f2f2;
}

.active {
  background-color: #f2f2f2;
}
</style>
